<template>
	<view>
		<view style="text-align: center;margin-top: 160rpx;" v-if="isloding">
			<u-loading size="36"></u-loading>
		</view>
		<view class="application" v-if="!isloding">
			<view class="banner">
				<image class="bg" src='@/static/detail_bg.png' mode="">
				</image>
				<view class="banner-bottom">
					<image class="back" src="/static/application/bottom.png" mode=""></image>
					<view class="content flex">
						<view class="content-left">
							<view class="label">直播粉丝专享</view>
							<view class="prices flex align-end justify-center">
								<view class="unit">¥</view>
								<view class="price">{{list[0].price}}</view>
							</view>
						</view>
						<view class="content-right">
							<view class="old-price">
								<text>日常价:¥{{list[0].old_price}}</text>
							</view>
							<view class="desc">
								<!-- <text>99%的用户通过了</text> -->
								<text>网约车考试秘籍，轻松过关</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="authentication flex align-center" @click="show = true">
				<image class="bar" src="/static/application/renzheng.png" mode=""></image>
				<view class="label">官方认证</view>
				<view class="desc">点击可查看官方认证资质</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{list[0].sub_name}}
				</view>
				<view class="notice">2024年同步官方最新网约车资格正题库</view>
				<view class="grid flex align-center">
					<view class="grid-item">
						<text class="label">有效期</text>
						<text class="value">永久有效</text>
					</view>
					<view class="grid-item">
						<text class="label">全国题</text>
						<text class="value">{{allcount || 0}}道</text>
					</view>
					<view class="grid-item">
						<text class="label">{{city}}题</text>
						<text class="value">{{citycount || 0}}道</text>
					</view>
					<view class="grid-item">
						<text class="label">在学人数</text>
						<text class="value">20万人</text>
					</view>
				</view>
			</view>
			<view class="citys">
				<view class="nav">
					<view class="name">已开通技巧城市</view>
					<view class="more" @click="handMore">
						<text>查看更多</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="all-list">
					<view class="item" v-for="item in gridCitys" :key="item.region_id"
						@click="change_city(item.region_name)">
						{{ item.region_name }}
					</view>
				</view>
			</view>
			<view class="evaluate">
				<view class="evaluate-nav">用户评价</view>
				<view class="evaluate-list">
					<view class="evaluate-list-item">
						<view class="user flex align-center">
							<image
								src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F21%2F20200721225542_2R83m.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687483906&t=07e49becc61bb43df952606f047fdaf7"
								mode=""></image>
							<view class="name">李师傅</view>
						</view>
						<view class="content">
							学习了技巧，果然很快就考试通过了
						</view>
					</view>
					<view class="evaluate-list-item">
						<view class="user flex align-center">
							<image
								src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F21%2F20200721225542_2R83m.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687483906&t=07e49becc61bb43df952606f047fdaf7"
								mode=""></image>
							<view class="name">王师傅</view>
						</view>
						<view class="content">
							感谢平台,学习之后考试很快通过了
						</view>
					</view>
					<view class="evaluate-list-item">
						<view class="user flex align-center">
							<image
								src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F21%2F20200721225542_2R83m.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687483906&t=07e49becc61bb43df952606f047fdaf7"
								mode=""></image>
							<view class="name">宋师傅</view>
						</view>
						<view class="content">
							考试里面的技巧题库真的很有用,推荐大家使用
						</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="detail-nav">
					详情介绍
				</view>
				<image src="@/static/detial_down.png" mode="widthFix"></image>
			</view>
			<view class="action-bottom">
				<view class="action-top flex align-center">
					<view class="label">优惠倒计时</view>
					<u-count-down :timestamp="timestamp" bg-color='#FE592D' color="#fff" font-size="32rpx"
						separator-color="#FE592D" separator-size="32rpx" padding="14rpx"></u-count-down>
				</view>
				<view class="btn" @click="handOpen">
					<image src="@/static/getbtn.png" mode="widthFix"
						style="width: 702rpx;height: 100rpx;margin-left: 24rpx;margin-top: 10rpx;"></image>
					<view class="btn_bg">
						立即抢购
					</view>
					<!-- <view class="btn-text submit_btn" v-else>
					福利已结束
				</view> -->
				</view>
				<view style="width: 750rpx;height: 45rpx;"></view>
			</view>
			<lock-pop ref="lock" />
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="28">
			<view style="height: 792rpx;overflow: hidden;background-color: #FFFFFF;border-radius: 28rpx;">
				<view style="display: flex;align-items: center;margin-top: 40rpx;margin-left:28rpx;">
					<image src="@/static/top.png" style="width: 20rpx;height: 24rpx;"></image>
					<view class="top_left">保障</view>
					<view class="top_title">高清视频 | 版权保护 | 消费者保护服务</view>
				</view>
				<view class="top_line"></view>
				<view style="margin-top: 50rpx;margin-left: 72rpx;">
					<view style="display: flex;align-items: center;">
						<image src="@/static/first.png" class="pop_img"></image>
						<view style="margin-left: 24rpx;">
							<view class="right_top">无时间限制</view>
							<view class="right_bottom">无限次学习技巧课程</view>
						</view>
					</view>
					<view style="display: flex;align-items: center;margin-top: 64rpx;">
						<image src="@/static/center.png" class="pop_img"></image>
						<view style="margin-left: 24rpx;">
							<view class="right_top">版权保护</view>
							<view class="right_bottom">该课程受版权保护</view>
						</view>
					</view>
					<view style="display: flex;align-items: center;margin-top: 64rpx;">
						<image src="@/static/end.png" class="pop_img"></image>
						<view style="margin-left: 24rpx;">
							<view class="right_top">不支持退款</view>
							<view class="right_bottom">该课程购买后不支持退款</view>
						</view>
					</view>
				</view>
				<view @click="handOpen" style="display: flex;justify-content: center;  margin-top: 72rpx;">
					<image src="@/static/buy_btn.png" class="buy_img"></image>
				</view>
			</view>
		</u-popup>
		<cityDia :citys="citys" ref="cityRef" />
	</view>
</template>

<script>
	import {
		doCountTime,
		doPaper,
		getProduct,
		doCitys
	} from '@/api/home.js'
	import lockPop from '@/pages/tabbar/home/components/lockPop.vue'
	import cityDia from './components/cityDia.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			lockPop,
			cityDia
		},
		data() {
			return {
				citys: [],
				city: '',
				paperList: [],
				list: [],
				isloding: true,
				allcount: 0,
				citycount: 0,
				show: false
			}
		},
		computed: {
			...mapGetters('app', {
				token: 'token',
				timestamp: 'timestamp'
			}),
			gridCitys() {
				return this.citys.filter((el, index) => {
					return index <= 4
				})
			}
		},
		onLoad() {
			doCitys().then(({
				data
			}) => {
				this.citys = data
			})
			this.city = this.$store.state.app.location
			this.getPaper()
			this.getproduct()
		},
		methods: {
			change_city(region_name) {
				getApp().globalData.name = region_name;
				uni.switchTab({
					url: '/pages/tabbar/home/index'
				})
			},
			handMore() {
				this.$refs.cityRef.showEdit()
			},
			//获取题库
			async getPaper() {
				const {
					data
				} = await doPaper({
					city: this.$store.state.app.location,
				})
				for (let i in data.paper) {
					if (data.paper[i].city == '0') {
						this.allcount = data.paper[i].questionCount
					}
					if (data.paper[i].city != '0') {
						this.citycount = data.paper[i].questionCount
					}
				}
				this.paperList = data
			},
			//获取价格
			async getproduct() {
				const {
					data
				} = await getProduct({
					city: this.$store.state.app.location
				})
				this.list = data
				this.isloding = false
			},
			handOpen() {
				this.show = false
				if (!this.token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				// if (this.timestamp <= 0) {
				// 	this.$u.toast('福利已结束')
				// 	return
				// }
				uni.navigateTo({
					url: '/pages/paper/Set_meal'
				})
				// this.$refs.lock.showEdit()
			},
		}
	}
</script>
<style lang="scss">
	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}

	// /deep/.u-drawer-content {
	// 	overflow: visible;
	// }
</style>
<style lang="scss" scoped>
	.application {
		.banner {
			position: relative;

			.bg {
				width: 100%;
				height: 512rpx;
			}

			&-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				.back {
					width: 100%;
					height: 141rpx;
				}

				.content {
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 3;
					width: 100%;
					height: 141rpx;

					&-left {
						width: 240rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.label {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #603102;
						}

						.prices {
							margin-top: 15rpx;
							color: #603102;

							.unit {
								font-size: 25rpx;
							}

							.price {
								margin-left: 6rpx;
								font-weight: bold;
								font-size: 46rpx;
							}
						}
					}

					&-right {
						flex: 1;
						margin-left: 40rpx;

						.old-price {
							margin-top: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #403302;
						}

						.desc {
							margin-top: 20rpx;
							padding-left: 30rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;

							text {
								&:last-child {
									margin-left: 10rpx;
									font-size: 33rpx;
								}
							}
						}
					}
				}
			}
		}

		.authentication {
			background: #F6F7FF;
			padding: 18rpx 24rpx;

			.bar {
				width: 24rpx;
				height: 24rpx;
			}

			.label {
				margin-left: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.desc {
				flex: 1;
				margin-left: 14rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.info {
			background-color: #ffffff;
			padding: 26rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.notice {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #0683FF;
			}
		}

		.grid {
			width: 702rpx;
			margin: 68rpx auto 0 auto;
			background-color: #F5F5F5;
			border-radius: 16rpx;
			padding: 28rpx;

			&-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.label {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.value {
					margin-top: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.detail {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 24rpx 0 180rpx 0;

			&-nav {
				padding: 0 24rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				margin-top: 24rpx;
				width: 750rpx;
				height: auto;
			}
		}

		.citys {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 32rpx 24rpx 40rpx 24rpx;

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.more {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.all-list {
				margin-top: 40rpx;
				display: flex;

				.item {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:not(:first-child) {
						border-left: 1rpx solid #999999;
					}
				}
			}
		}

		.evaluate {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 24rpx;

			&-nav {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			&-list {
				&-item {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #ddd;

					.user {
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.name {
							flex: 1;
							margin-left: 18rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.content {
						margin-top: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.action-bottom {
			position: fixed;
			bottom: 0;
			z-index: 9999;
			width: 750rpx;
			padding-bottom: 5rpx;
			background-color: #ffffff;


			.action-top {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFF1D9;
				padding: 16rpx 0;

				.label {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FE592D;
					margin-right: 30rpx;
				}
			}

			.btn {
				.btn_bg {
					position: relative;
					width: 702rpx;
					height: 100rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 42rpx;
					color: #FFFFFF;
					text-shadow: 0px 2px 12px rgba(254, 89, 45, 0.9);
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					margin-top: -127rpx;
					border-radius: 36rpx;
				}

				// padding: 10rpx 24rpx;
				// // position: relative;

				// image {
				// 	width: 100%;
				// 	height: auto;
				// }

				// &-text {
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// 	width: 100%;
				// 	text-align: center;
				// 	line-height: 140rpx;
				// 	color: #ffffff;
				// }
			}
		}

	}

	.submit_btn {
		font-size: 42rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		text-shadow: 0px 2px 12px rgba(254, 89, 45, 0.9);
	}

	.self_inspection_bg {
		width: 600rpx;
		height: 688rpx;
		// background: linear-gradient(180deg, #ECEEFF 0%, #FFFFFF 100%);
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: column;

		.self_inspection {
			width: 202rpx;
			height: 167rpx;
			margin-top: 108rpx;
		}

		.self_inspection_title {
			width: 524rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 50rpx;
			margin-top: 68rpx;
			text-align: center;
		}

		.go_self_inspection_btn {
			width: 506rpx;
			height: 88rpx;
			background: #e55624;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 60rpx;
		}

		.cancel_btn {
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 32rpx;
		}
	}

	.poptag {
		width: 312rpx;
		height: 46rpx;
		background: #FEF3E1;
		border-radius: 28rpx;
		border: 1rpx solid #D17857;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #D17857;
		text-align: center;
		margin-top: 34rpx;
	}

	.top_left {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #36c269;
		margin-left: 8rpx;
	}

	.top_title {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 16rpx;
	}

	.top_line {
		width: 702rpx;
		height: 1rpx;
		background-color: #EEEEEE;
		margin: 0 auto;
		margin-top: 26rpx;
	}

	.pop_img {
		width: 88rpx;
		height: 88rpx;
	}

	.right_top {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.right_bottom {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}

	.buy_img {
		width: 702rpx;
		height: 94rpx;
	}
</style>